<template>
  <div class="notice-area">
    <div class="error-title">
      <slot name="icon"></slot>
      <span> 共 {{msgList.length}} 条</span>
      <slot name="clear"></slot>
    </div>

    <div class="error-area">
      <el-scrollbar>
        <div class="list-wrapper">
          <el-row
              :key="index"
              class="error-row"
              v-for="(item, index) in msgList">
            <el-col :span="18">
              <el-tag :type="getMsgTagType(item.errorLevel)">{{convertTime(item.time)}}</el-tag>
            </el-col>
            <el-col :span="6">
              <el-tag :title="item.errorCode" class="error-code" :type="getMsgTagType(item.errorLevel)">code:{{item.errorCode}}</el-tag>
            </el-col>
            <el-col>
              <el-tag :title="item.errorMsg" class="error-msg" :type="getMsgTagType(item.errorLevel)">{{item.errorMsg}}</el-tag>
            </el-col>
          </el-row>
        </div>
      </el-scrollbar>
    </div>

  </div>
</template>

<script>
import {defineComponent, ref} from 'vue'
import {convertTime} from "@/utils/date";

export default defineComponent({
  name: "NoticePanel",
  props: ['msgList'],
  setup() {
    const getMsgTagType = (level) => level == 1 ?
        'danger' : level == 2 ? 'warning' : ''

    return {
      convertTime,
      getMsgTagType
    }
  }
})
</script>

<style scoped lang="scss">
  @import "index";
</style>
